import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppService } from '../../services/app.service';
import { Router } from '@angular/router';
import { first } from 'rxjs';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [RouterModule,
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    HttpClientModule,],
  templateUrl: './sidebar.component.html',
  styleUrl: './sidebar.component.scss'
})
export class SidebarComponent implements OnInit {

  public accesstoken: any;
  public pluginList: any = [];
  public pluginListSubcribe: any;
  constructor(private fb: FormBuilder, private appService: AppService, private route: Router) {
  }
  async ngOnInit() {
    const sidebar = document.querySelector(".sidebar") as HTMLElement;
    const sidebarClose = document.querySelector("#sidebar-close") as HTMLElement;
    const menu = document.querySelector(".menu-content") as HTMLElement;
    const menuItems = document.querySelectorAll(".submenu-item") as NodeListOf<HTMLElement>;
    const subMenuTitles = document.querySelectorAll(".submenu .menu-title") as NodeListOf<HTMLElement>;

    sidebarClose.addEventListener("click", () => sidebar.classList.toggle("close"));

    menuItems.forEach((item, index) => {
      item.addEventListener("click", () => {
        menu.classList.add("submenu-active");
        item.classList.add("show-submenu");
        menuItems.forEach((item2, index2) => {
          if (index !== index2) {
            item2.classList.remove("show-submenu");
          }
        });
      });
    });

    subMenuTitles.forEach((title) => {
      title.addEventListener("click", () => {
        menu.classList.remove("submenu-active");
      });
    });
    this.pluginListSubcribe = await this.appService.loadPlugin().subscribe(res => {
      console.log('res', res);
     this.pluginList = res;
     console.log(this.pluginList)
    });
  }

  async delayButton(){
    await this.delay(10);
    window.location.reload();
  }

  async Logout() {
    await this.appService.destroyToken();
    this.route.navigate(['']);
    // await window.location.reload();
  }
  async addAdmin() {
    this.route.navigate(['add-admin']);
    await this.delay(10);
    window.location.reload();
  }
  private delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

